<script lang="ts" setup>
// Pinia store 替代 Zustand
import { ArrowLeftOutlined } from '@ant-design/icons-vue';
// 替代 useEffect
import { useRouter } from 'vue-router'; // Vue Router 替代 React Router

const props = defineProps({
  courseId: {
    type: String,
    required: true,
  },
  folderId: {
    type: String,
    required: true,
  },
});

const router = useRouter(); // 创建 navigate 替代 useNavigate

// 返回按钮点击处理函数
const handleBackClick = () => {
  router.push({
    name: 'course-details',
    params: { courseId: props.courseId, folderId: props.folderId },
  });
};
</script>

<template>
  <div :class="$style.header">
    <slot name="leftsection">
      <div :class="$style.leftSection" @click="handleBackClick">
        <ArrowLeftOutlined :class="$style.icon" />
        <span :class="$style.title">返回课程主页</span>
      </div>
    </slot>
  </div>
</template>

<style module lang="scss">
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
  background-color: #fff;
  border-bottom: 1px solid #e6e6e6; // 增加底边框
  .leftSection {
    display: flex;
    align-items: center;
    // 鼠标聚焦时变为小手
    cursor: pointer;

    .icon {
      font-size: 15px;
      margin-right: 8px;
      padding: 5px;
      border: 1px solid #ccc;
      //添加边框border-radius: 4px;
      //为边框添加圆角padding: 4px;
      //为图标增加内边距background: none;
      -webkit-border-radius: 20px;
      -moz-border-radius: 20px;
      -ms-border-radius: 20px;
      -o-border-radius: 20px;
}

    .title {
      font-size: 16px;
      font-weight: 500;
      color: #333;
    }
  }

  .rightSection {
    display: flex;
    align-items: center;

    .iconButton {
      font-size: 16px;
      color: #666;
      margin-right: 16px;
      background: none;
      border: 1px solid #ccc;
      //添加边框border-radius: 4px;
      //为边框添加圆角padding: 4px;
      //为按钮增加内边距cursor: pointer;
      -webkit-border-radius: 20px;
      -moz-border-radius: 20px;
      -ms-border-radius: 20px;
      -o-border-radius: p20x;
}

    .downloadButton {
      background: linear-gradient(135deg, rgba(0, 51, 153, 0.8) 0%, rgba(0, 51, 153, 0.5) 100%);
      box-shadow: 0 4px 10px rgba(0, 51, 153, 0.3);
      color: #fff;
      border-radius: 6px;
      font-size: 14px;
      padding: 4px 12px;
      border: 1px solid #ccc;  // 为下载按钮添加边框
      box-shadow: none;
      -webkit-border-radius: 20px;
      -moz-border-radius: 20px;
      -ms-border-radius: 20px;
      -o-border-radius: p20x;
    }
  }
}
</style>
